
<include file="Public:js"/>
<div class="page-group">
    <div class="page page-current" data-page="index">

        <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" style="text-align: center">
            <div class="swiper-container" style="height: 7rem">
                <div class="swiper-wrapper" style="height: 7rem">
                    <volist name="dpic" id="v">
                        <div class="swiper-slide" onclick="window.location.href='{$v.url}'"><img
                                src="{$v.pic_path}"
                                style="width: 100%;height: 100%" title="{$v.title}"></div>
                    </volist>
                </div>
                <div class="swiper-pagination banner_role"></div>
                <!-- <div class="banner_announce"><marquee width="150" scrolldelay="700" loop="3" direction="left">啦啦啦哈哈哈哈哈哈哈哈哈哈哈哈哈和</marquee></div> -->
            </div>
            <div class="bar">
                <div class="searchbar color_index_head">
                    <div class="search-input">
                        <label class="icon icon-search" for="search"></label>
                        <input type="search" id='search' class="border_radius"
                               onclick="window.location.href='{:U('Book/kind')}'" placeholder="搜索关键字，选择分类"/>
                    </div>
                    <a onclick="window.location.href='{:U('Book/kind')}'" class="head_top_menu color_white">
                        <img src="/wechat/img/fenlei@2x.png" class="kind_img">
                    </a>
                </div>
            </div>
            <!--<img src="/wechat/img/dianzhangtuijian@2x.png" class="book_rec">-->

            <div class="waterfall book_rec_div" style="margin-top:2.2rem;">
                <ul class="waterfall_ul">

                </ul>
                <div class="no_book" style="display:none;text-align:center;width: 100%;">没有了</div>
            </div>

            <div class="infinite-scroll-preloader">
                <div class="preloader"></div>
            </div>
        </div>

        <include file="Public:footer" />
    </div>
</div>


<script>
    $.config = {
        autoInit: true,
    }
</script>
<script>
    $(function () {
        $(".swiper-container").swiper({
            autoplay: 5000,
            pagination: '.swiper-pagination',
            paginationClickable: true
        });
    });
    var loading = false;
    var maxItems = 100;
    var itemsPerLoad = 4;
    function addItems(number, lastIndex) {

        $.ajax({
            type: "GET",
            url: "{:U('Book/getbook_recommend')}",
            data: {i:lastIndex, num:number,test:"test"},
            dataType: "json",
            success: function(data){
                var html = '';
                if(data==0){
                    //loading=true;
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                    $('.infinite-scroll-bottom .waterfall .no_book').css('display','inline-block');
                    return;
                }
                $.each(data, function(i, item) {
                    html += '<li>' +
                            '<div class="color_white_bac book_rec_detail" >' +
                            '<div class="book_rent_num">借阅量:'+item.rented_num+'</div>' +
                            '<img src="'+item.b_logo+'" alt="" style="width: 100%;height: 160px" onclick=window.location.href="'+item.detail_url+'">' +
                            '<div>' +
                            '<div class="rec_div_book_name">《'+item.sm+'》</div>' +
                            '<div class="data_book" style="margin-top: 5px">' +
                            '<p class="book_price color_price">￥'+item.dj+'</p>' +
                            '<p class="book_comment color_comment">&nbsp;&nbsp;'+item.apprise_num+'</p>' +
                            '</div>' +
                            '<div class="button_operation" style="text-align: center">' +
                            '<input  onclick="rentbook(1,'+item.book_id+')"  type="button" value="我要借阅" class="button_iwant_buy btn_radius" />' +
                            '</div>' +
                            '</div>' +
                            '</div>' +
                            '</li>';
                });
                $('.infinite-scroll-bottom .waterfall_ul').append(html);
                if($('.waterfall_ul li').length<itemsPerLoad){
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                }
            }
        });
    }
    addItems(itemsPerLoad, 0);


    var lastIndex = 4;
    $(document).on('infinite', '.infinite-scroll-bottom', function () {
        if (loading) return;
        loading = true;
        setTimeout(function () {
            // 重置加载flag
            loading = false;

            if (lastIndex >= maxItems) {
                // 加载完毕，则注销无限加载事件，以防不必要的加载
                $.detachInfiniteScroll($('.infinite-scroll'));
                // 删除加载提示符
                $('.infinite-scroll-preloader').remove();
                return;
            }

            // 添加新条目
            lastIndex = $('.waterfall_ul li').length;
            addItems(itemsPerLoad, lastIndex);
            // 更新最后加载的序号
            //容器发生改变,如果是js滚动，需要刷新滚动
            $.refreshScroller();
        }, 1000);
    });

    function rentbook(type,id){
        $.post("{:U('Book/is_rentorbuy')}",{id:id,type:type},function(data){
            if(data>0){
                //已借阅过
                if(confirm('您已借阅过此书或已加入书包，是否再次加入书包？')){
                    joincart(type,id);
                }
            }else{
                joincart(type,id);
            }
        });

    }

    function joincart(type,id){
        $.ajax({
            type: "GET",
            url: "{:U('Book/joincart')}",
            data: {id:id,type:type},
            dataType: "json",
            success: function(data){
                var str="";
                if(type==0){
                    str="加入购物车";
                }else{
                    str="加入书包";
                }
                if(data==1){
                    $.alert("成功"+str);
                }
            }
        });
    }
</script>
